body {
    background: #aaa;
}

#game {
    background: #9c9;
    padding: 5px;
}

/* Define the 3D perspective view and dimension of each card. */
.card {
    -webkit-perspective: 600;
    width: 80px;
    height: 120px;
}

/* There are two faces on each card. We are going to rotate the face late. Therefore,
we define how the face transits by CSS3 transition property. We also hide the
back face visibility.*/
.face {
    border-radius: 10px;
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-transition: all .3s;
    -webkit-backface-visibility: hidden;
}

/* style each individual face. The front face has a higher z-index than the back face:*/
.front {
    background: #966;
    z-index: 10;
}
.back {
    background: #eaa;
    -webkit-transform: rotate3d(0,1,0,-180deg);
    z-index: 8;
}

/* flip the card, we rotate the front face to back and back face to front.
We also swap the z-index of the front and back face: */
.card-flipped .front {
    -webkit-transform: rotate3d(0,1,0,180deg);
    z-index: 8;
}
.card-flipped .back {
    -webkit-transform: rotate3d(0,1,0,0deg);
    z-index: 10;
}

/* set the card to corresponding playing card graphics */
.cardAK {
    background: url(../images/AK.png);
}
.cardAQ {
    background: url(../images/AQ.png);
}

